<template>
	<div class="kaochangguanli flex">
    <left></left>
    <div style="width: calc(100vw - 280px); height: calc(100vh - 40px); overflow: auto; padding: 20px;">

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="渠道统计" name="first">
          <div class="flexc" style="margin-bottom: 20px;">
            <el-select v-model="search.id"  style="width: 250px; margin-right: 20px;" placeholder="请选择赛事">
                <el-option :label="item.name" :value="item.id" v-for="(item,index) in saishis" :key="item.id"></el-option>
            </el-select>
            <el-select v-model="search.channel_id"  style="width: 250px; margin-right: 20px;" placeholder="请选择渠道">
                <el-option :label="item.channel_name" :value="item.id" v-for="(item,index) in qudaos" :key="item.id"></el-option>
            </el-select>
            <el-input v-model="search.channel_password" type="password" style="width: 250px;  margin-right: 20px;" placeholder="请输入密码"></el-input>

            <el-button type="primary" round @click='sousuo'>搜索</el-button>
          </div>
          <el-table :data="tableData1"  border  style="width: 100%">
              <el-table-column prop="channel_id" label="ID"></el-table-column>
              <el-table-column prop="channel_name" label="渠道"></el-table-column>
              <el-table-column prop="spread_income" label="返点"></el-table-column>
              <el-table-column prop="spread_players_num" label="总数"></el-table-column>
          </el-table>
          <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="分销人统计" name="second">
          <div class="flexc" style="margin-bottom: 20px;">
            <el-select v-model="search.id" @change="getrenyuan()" style="width: 250px; margin-right: 20px;" placeholder="请选择赛事">
                <el-option :label="item.name" :value="item.id" v-for="(item,index) in saishis" :key="item.id"></el-option>
            </el-select>
            <el-select v-model="search.spread_user_id"  style="width: 250px; margin-right: 20px;" placeholder="请选择报名人/分销人">
                <el-option :label="item.name" :value="item.id" v-for="(item,index) in renyuans" :key="item.id"></el-option>
            </el-select>
            <el-button type="primary" round @click='sousuo'>搜索</el-button>
          </div>
          <el-table :data="tableData2"  border  style="width: 100%">
              <!-- <el-table-column prop="user_id" label="ID"></el-table-column> -->
              <el-table-column prop="id_name" label="姓名"></el-table-column>
              <el-table-column prop="spread_income" label="返点"></el-table-column>
              <el-table-column prop="spread_players_num" label="总数"></el-table-column>
          </el-table>
          <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
        </el-tab-pane>
      </el-tabs>


    </div>


	</div>
</template>

<script>
  import left from '../left.vue'
	export default {
		name: 'kaochangguanli',
    components:{
      left
    },
		data() {
			return {
        activeName:'first',
        tableData1:[],
        tableData2:[],
        search:{
          page:1,
          page_size:20,
          id:'',
          channel_id:"",
          spread_user_id:"",
          channel_password:""
        },
        total:0,
        saishis:[],
        renyuans:[],
        qudaos:[]
			}
		},
		created() {


      axios.get(this.IP_URL+'/admin/competition/list',{params:{page:1,page_size:2000}}).then((response)=>{
      	if (response.data.msg.code == 0) {
      		this.saishis = response.data.data.data
      	} else {
      		this.$message.error(response.data.msg.info);
      	}
      })



      axios.get(this.IP_URL+'/api/enrolment/channellist').then((response)=>{
      	if (response.data.msg.code == 0) {

      		this.qudaos = response.data.data
      	} else {
      		this.$message.error(response.data.msg.info);
      	}
      })

		},
		mounted() {

		},
		methods: {
      getrenyuan:function(){


        if(!this.search.id){
          this.$message.error('请先选择比赛');
          return false
        }
        this.search.channel_id = ""
        axios.get(this.IP_URL+'/admin/enrolment/option',{params:{competition_id:this.search.id}}).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.renyuans = response.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      sousuo:function(){
        this.search.page = 1
        this.getlist()
      },
      handleClick:function(){
        this.search ={
          page:1,
          page_size:20,
          id:'',
          channel_id:"",
          spread_user_id:""
        }

      },
      getlist:function(){
        if(this.activeName == 'first'){
          axios.get(this.IP_URL+'/api/competition/spreadchanneldata',{params:this.search}).then((response)=>{
          	if (response.data.msg.code == 0) {
          		this.tableData1 = [response.data.data]
              // this.total = response.data.data.total
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }else{
          axios.get(this.IP_URL+'/api/competition/spreaduserdatahou',{params:this.search}).then((response)=>{
          	if (response.data.msg.code == 0) {
          		this.tableData2 = [response.data.data]
              // this.total = response.data.data.total
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }

      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
		}
	}
</script>


<style scoped >

</style>
